<template>
  <div class="content-section following-section">
    <div class="section-header">
      <h2 class="section-title">我的关注 ({{ dataList.length }})</h2>
    </div>
    <div class="user-list" ref="userList" @scroll="handleScroll">
      <transition-group name="user-item" tag="div">
        <div v-for="user in dataList" :key="user.id" class="user-item">
          <img :src="user.avatar" :alt="user.username" class="user-avatar" />
          <div class="user-info">
            <h4 class="user-nickname">{{ user.username }}</h4>
            <p class="user-follow-time">关注时间: {{ user.followTime }}</p>
          </div>
          <button
            :class="['btn-unfollow', { loading: user.isUnfollowLoading }]"
            @click="handleUnfollow(user)"
            :disabled="user.isUnfollowLoading"
          >
            <span class="btn-text">{{ user.isUnfollowLoading ? '处理中...' : '取消关注' }}</span>
            <span class="btn-loading" v-if="user.isUnfollowLoading">
              <span class="loading-spinner"></span>
            </span>
          </button>
        </div>
      </transition-group>
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <span class="loading-text">加载中...</span>
      </div>

      <!-- 到底提示 -->
      <div v-if="isLastPage && dataList.length > 10" class="end-tip">
        <span>已经到底了</span>
      </div>

      <!-- 空状态 -->
      <div v-if="!loading && dataList.length === 0" class="empty-state"> 暂无粉丝 </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { getFollowListApi, unFollowUserApi } from '@/api/system/user';
  import { ref, onMounted } from 'vue';
  import { useUserStore } from '@/store/modules/user';

  const userStore = useUserStore();
  const userList = ref(null);

  const userInfo = ref<any>(null);

  const handleUnfollow = async (user: any) => {
    if (!user || user.isUnfollowLoading) return;

    user.isUnfollowLoading = true;

    try {
      await unFollowUserApi(user.userId);

      const index = dataList.value.findIndex((u) => u.id === user.userId);
      if (index > -1) {
        dataList.value.splice(index, 1);
      }
      console.log(`✅ 成功取消关注用户: ${user.username}`);
    } catch (error) {
      console.error('❌ 取消关注失败:', error);
    } finally {
      user.isUnfollowLoading = false;
    }
  };

  // 分页参数
  const pageNum = ref(1);
  const pageSize = 10;
  const loading = ref(false);
  const isLastPage = ref(false);
  const dataList = ref<any[]>([]);

  async function loadData(isRefresh = false) {
    if (!userInfo.value || loading.value || (isLastPage.value && !isRefresh)) return;

    loading.value = true;
    try {
      const params = {
        pageNum: pageNum.value,
        pageSize: pageSize,
      };

      const data: any = await getFollowListApi(userInfo.value.userId, params);

      let list = data.records || [];

      if (isRefresh) {
        dataList.value = list;
      } else {
        dataList.value = [...dataList.value, ...list];
      }

      if (list.length < 10) {
        isLastPage.value = true;
      }

      if (!isLastPage.value) {
        pageNum.value++;
      }
    } catch (error) {
      console.error('error:', error);
    } finally {
      loading.value = false;
    }
  }

  function resetPage() {
    pageNum.value = 1;
    isLastPage.value = false;
    dataList.value = [];
  }

  const handleScroll = () => {
    if (!userList.value) return;

    const { scrollTop, scrollHeight, clientHeight } = userList.value;

    // 当滚动到距离底部50px时触发加载
    if (scrollTop + clientHeight >= scrollHeight - 50) {
      loadData();
    }
  };

  onMounted(() => {
    userInfo.value = userStore.info || {};
    resetPage();
    loadData(true);
  });
</script>

<style lang="less">
  .user-list {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;

    .user-item {
      display: flex;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #f1f5f9;

      &:last-child {
        border-bottom: none;
      }

      .user-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 16px;
        object-fit: cover;
        border: 2px solid #e2e8f0;
      }

      .user-info {
        flex: 1;

        .user-nickname {
          margin: 0 0 4px;
          font-size: 16px;
          font-weight: 600;
          color: #1e293b;
          transition: color 0.3s ease;
        }

        .user-follow-time {
          margin: 0;
          font-size: 14px;
          color: #64748b;
        }
      }

      .btn-unfollow {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #f75361;
        color: white;
        border: none;
        border-radius: 20px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        min-width: 100px;
        justify-content: center;

        &:hover {
          transform: translateY(-2px);
        }

        &:active {
          transform: translateY(0);
        }

        .btn-icon {
          font-size: 16px;
          transition: transform 0.3s ease;
        }

        .btn-text {
          transition: all 0.3s ease;
        }

        .btn-loading {
          display: flex;
          align-items: center;
          justify-content: center;

          .loading-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top: 2px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
          }
        }

        &.loading {
          .btn-text {
            opacity: 0.8;
          }
        }
      }
    }
  }

  // 过渡动画
  .user-item-enter-active {
    transition: all 0.6s ease-out;
  }

  .user-item-leave-active {
    transition: all 0.3s ease-in;
  }

  .user-item-enter-from {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }

  .user-item-leave-to {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
    height: 0;
    padding: 0;
    margin: 0;
  }

  .user-item-move {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  // 加载动画
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .user-list {
      .user-item {
        padding: 12px 0;

        .user-avatar {
          width: 45px;
          height: 45px;
          margin-right: 12px;
        }

        .user-info {
          .user-nickname {
            font-size: 15px;
          }

          .user-follow-time {
            font-size: 13px;
          }
        }

        .btn-unfollow {
          padding: 6px 12px;
          font-size: 13px;
          min-width: 90px;

          .btn-icon {
            font-size: 14px;
          }

          .btn-loading .loading-spinner {
            width: 14px;
            height: 14px;
          }
        }
      }
    }
  }
</style>
